//1.制定路由规则
//2.造一个路由器管理这些规则
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入各个组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

Vue.use(VueRouter)

//造一个路由器
const router = new VueRouter({
	//工作模式
	mode:'history',
	//编写一堆具体规则
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			children:[
				{
					name:'xinwen',
					path:'news', //此处一定不要写"/"
					component:News
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail/:id/:title/:time', //决定着：参数的个数、名字
							component:Detail,

							//props的第一种写法 —— 给路由组件传递props（用的不多）
							// props:{a:'哈哈'}

							//props的第二种写法 —— 把路由收到的所有params参数都通过props传给Detail
							// props:true

							//props的第三种写法 —— 把路由收到的所有params参数都通过props传给Detail
							props($route){
								return{
									a:'哈哈',
									...$route.params
								}
							}
						}
					]
				}
			]
		}
	]
})

//暴露路由器
export default router